<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="full-screen" content="yes">
    <meta name="x5-fullscreen" content="true">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/pop-ups.css"><!--弹出层-->
    <link rel="stylesheet" href="../../css/icon-font.css"/><!--图标-->
    <link rel="stylesheet" href="../../css/share.css"/><!--分享-->
    <title>行业数据</title>
    <style>

        body {
            background-color: white;
        }

        .menu-child div:last-child {
            /*border: none;*/
        }


        .info-content-area {
            background: rgba(255, 255, 255, 1);
        }

        /*************菜单选择器**开始**************/
        .info-inside-warp {
            height: 0.88rem;
            z-index: 5000;
            overflow: hidden;
            padding-left: 0.32rem;
        }

        .info-inside-warp .info-inside-column {
            left: 0;
            top: 0;
            width: 7.2rem;
            height: 0.88rem;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            display: flex;
            -webkit-overflow-scrolling: touch;
        }

        .info-inside-warp .info-inside-column div:first-child {
            margin-left: 0;
        }

        .info-inside-warp .info-inside-column div:last-child {
            padding-right: .4rem;
        }

        .info-inside-warp .info-inside-column .info-inside-item {
            height: 0.82rem;
            line-height: 0.88rem;
            margin: 0 0.26rem;
            color: rgba(34, 34, 34, 0.7)
        }

        .info-inside-warp .info-inside-column .info-inside-item .info-inside-underline {
            width: 100%;
            bottom: .08rem;
        }

        .info-inside-warp .info-inside-column .info-inside-item .info-inside-underline span {
            width: .36rem;
            background: rgba(44, 104, 255, 1);
            border-radius: .04rem;
        }

        .info-inside-warp .info-inside-column .info-inside-item .info-inside-underline .underactive {
            height: .06rem;
        }

        .info-inside-warp .info-inside-column .active {
            color: rgba(44, 104, 255, 1);
            font-weight: bold;
        }

        .info-inside-warp .inside-inside-traneara {
            width: .4rem;
            height: .88rem;
            right: 1.08rem;
            background: linear-gradient(270deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
        }

        .info-inside-warp .column-img {
            width: .64rem;
            height: 0.88rem;
            /*margin-top: 0.14rem;*/
            margin-left: 0.44rem;
        }

        .info-inside-warp .column-img span {
            margin-left: 0;
        }


        /*************菜单选择器**结束**************/

        /*************三级菜单选择器**开始**************/
        .menu-inside-warp {
            /*height: 0.76rem;*/
            top: 0.88rem;
            z-index: 5000;
            overflow: hidden;
            padding-left: 0.2rem;
            padding-bottom: 0.16rem;
            background: rgba(255, 255, 255, 1);
        }

        .menu-inside-warp .menu-inside-column {
            width: 7.34rem;
            /*height: 0.6rem;*/
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .menu-inside-warp .menu-inside-column div:last-child {
            /*padding-right: .24rem;*/
        }

        .menu-inside-warp .menu-inside-column .menu-inside-item {
            padding: 0 .1rem .16rem 0;
        }

        .menu-inside-warp .menu-inside-column div:first-child {
            padding-left: 0;
        }

        .menu-inside-warp .menu-inside-column .menu-inside-item span {
            height: .56rem;
            min-width: 1.68rem;
            line-height: .56rem;
            text-align: center;
            color: rgba(25, 25, 25, 0.6);
            background: rgba(244, 244, 244, 1);
            border-radius: 0.04rem;
        }

        .menu-inside-warp .menu-inside-column .menu-inside-item .active {
            color: #FFFFFF;
            background: #2C68FF;
        }

        /*************三级菜单选择器**结束**************/


        /*四级菜单-- 历年同比视图、折线视图*/
        .industry-view-tab {
            text-align: center;
            height: 0.44rem;
        }

        .industry-view-normal {
            width: 2rem;
            line-height: 0.4rem;
            border: 1px solid #f6f6f6;
            color: rgba(25, 25, 25, 0.6);
        }

        .industry-view-active {
            border: 1px solid #2C68FF;
            color: #2C68FF;
        }

        .industry-view-left {
            border-radius: 2px 0 0 2px;
        }

        .industry-view-right {
            border-radius: 0px 2px 2px 0px;;
        }

        .industry-chart-area {
            padding: 0.01rem 0.32rem 0.1rem 0.32rem
        }

        .industry-chart-content {
            min-height: 4.4rem;
            padding-top: 0.28rem;
        }

        .industry-chart-table {
            width: 100%;
            background-color: #F6F6F6;
            color: rgba(34, 34, 34, 0.6);
            padding: 0.2rem 0 0.2rem 0.16rem;
        }

        .industry-chart-circle {
            width: 0.2rem;
            height: 0.2rem;
            border: 2px solid rgba(78, 126, 244, 1);
            border-radius: 10rem;
            margin-left: 0.1rem;
        }

        .menu-show {
            display: none;
        }

        .table-list-collect {
            width: 0.8rem;
            height: 0.4rem;
            /*line-height: 0.4rem;*/
            background-color: #F4F5F9;
            border-radius: 2px;
            text-align: center;
        }

        .table-list-isc {
            color: #2C68FF;
        }

        .table-list-noc {
            color: rgb(191, 191, 191)
        }

        .table-list-login{
            top:-176px;
        }
        .table-list-shadow{
            height:192px;width:6.86rem;background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%);
        }
        .table-list-loginicon{
            color: #979797;
        }
        .table-list-all{
            color: #222222;
            margin-top:0.1rem;
        }

        .table-list-lock{
            color: rgba(34,34,34,0.4);
            margin-top:0.2rem;
            margin-bottom: 0.28rem;
        }

        .table-list-now{
            width:5.04rem;
            height:0.64rem;
            background-color:#2C68FF;
            border-radius: 2px;color: #FFFFFF;
        }


    </style>
</head>
<body>

<div class="flex-column ff400 h-100-p">
    <!--状态栏-->
    <div class="placeholder-top">
        <!--状态栏-->
        <div class="bg-main status-bar"></div>
        <!--导航栏-->
        <div class="bg-main nav-bar flex-row justify-content-between c-white align-items-center">
            <div class="left-bar" onclick="clickBack()">
                <span class="iconfont iconfanhui1 fs16"></span>
            </div>
            <div class="center-bar fs16 ff500 industry-name"></div>

            <div class="right-bar" >
                <!--<span class="iconfont iconfenxiang1 fs16"></span>-->
            </div>
        </div>
    </div>

    <!--二级菜单栏目选择器-->
    <div class="flex-row bg-white info-inside-warp">
        <div class="flex-row info-inside-column"></div>


    </div>


    <div class="flex-1 scoll-y  bg-white" id="refreshContainer">

        <!--三级菜单栏目选择器-->
        <div class="flex-row bg-white menu-inside-warp dis-n">
            <div class="flex-row align-items-center menu-inside-column"></div>
        </div>
        <!--四级菜单栏目 视图模型-->
        <div class="industry-view-model flex-row justify-content-center fs12">

            <!--<div class="industry-view-tab flex-row flex-wrap">-->
            <!--    <div class="industry-view-normal industry-view-active">历年同比视图</div>-->
            <!--    <div class="industry-view-normal">折线视图</div>-->
            <!--</div>-->

        </div>

        <div class="flex-row justify-content-center align-items-center refreshContainer"></div>
        <div class="contentArea info-content-area" id="menuIds">

        </div>

    </div>


</div>

<div class="prompt-tip-wrap" style="display: none"></div>
<div class="prompt-tip-triangle" style="display: none"></div>


</body>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/dict.js"></script>
<script src="../../js/jquery-3.4.1.min.js"></script>
<script src="../../js/checkJsBridge.js"></script>
<script src="../../js/utils.js"></script>
<script src="../../js/api.js"></script>
<!--这四个文件的引入必须按照顺序-->
<script src="../../js/date.js"></script>
<script src="../../js/icon-font.js"></script><!--用于彩色字体图标-->
<script src="../../js/template.js"></script>
<!--echarts-->
<script src="../../js/echarts.min.js"></script>

<script src="../../js/dateConversion.js"></script>

<script src="../../js/table-list.js"></script>

<script>
  let pm = {
    menuCode: '',
    menus: [],//菜单列表
    appName: '',
    isLogin: false,
  }

  function initPage(params) {
    //状态栏自适应
    Utils.sbhAdaptive()
    pm.isLogin = !user.isGuest
    pm.menuCode = params.menuCode
    pm.appName = params.appName
    $('.industry-name').html(pm.appName)
    initMenus()
  }

  function reLoadPage() {
    pm.isLogin = !user.isGuest
    $('.industry-name').html(pm.appName)
    $('#menuIds').html()
    initMenus()
  }

  //资讯数据初始化
  function initInfoList(mudeCode) {
    getIndustryList(mudeCode)

  }

  function getIndustryList(mudeCode) {
    // 查询图表信息
    Server.tableList.getChartsInfo({
      menuCode: mudeCode,
      pageNum: 1,
      pageSize: 20
    }).then(function (data) {
      data.list.forEach(it => {
        if ('1' === it.isShowLenend) {
          $('#childId_' + mudeCode).append('<div class=\'flex-column industry-chart-area\'><div class=\'flex-row align-items-center\'><div class="ff500 fs16">' + it.title + '</div><div class=\'title_' + it.chartsCode + ' \'> </div>  <div class=" flex-row justify-content-end flex-1"><div class="table-list-collect flex-row justify-content-center align-items-center " isCollect="' + it.collect + '" onclick=\'chartCollect("' + it.chartsCode + '",this)\'><div><span class="iconfont  fs12 ' + (it.collect === '1' && pm.isLogin ? 'iconyiguanzhu-01 table-list-noc' : 'iconguanzhu table-list-isc ') + ' " ></span></div></div></div>   </div> <div id=\'chart_' + it.chartsCode + '\'class=\'industry-chart-content\'> </div><div class=\'chart_' + it.chartsCode + '  mt10 mb10 \'></div> </div>')
        } else {
          $('#childId_' + mudeCode).append('<div class=\'flex-column industry-chart-area\'><div class=\'flex-row align-items-center\'><div class="ff500 fs16">' + it.title + '</div><div class=\'title_' + it.chartsCode + ' \'></div>   <div class=" flex-row justify-content-end flex-1"><div class="table-list-collect flex-row justify-content-center align-items-center " isCollect="' + it.collect + '" onclick=\'chartCollect("' + it.chartsCode + '",this)\'><div><span class="iconfont  fs12 ' + (it.collect === '1' && pm.isLogin ? 'iconyiguanzhu-01 table-list-noc' : 'iconguanzhu table-list-isc ') + ' " ></span></div></div></div>  </div> <div id=\'chart_' + it.chartsCode + '\'class=\'industry-chart-content\'> </div> </div>')
        }
        qrySubTopicDataSet(it.chartsCode, mudeCode, it.isShowLenend, it.title)
      })
    })

  }

  function qrySubTopicDataSet(subtopicCode, mudeCode, isShowLenend, title) {
    Server.tableList.qrySubTopicDataSet({
      'data': [],
      'isFirstAccess': '1',
      'subtopicCode': subtopicCode,
    }).then(function (data) {
      if (data.data) {
        data.data.subtopicTitle = title ? title : data.data.subtopicTitle
      }
      // 处理图表信息
      dealChart(data.data, mudeCode, isShowLenend, true)
    })
  }

  // 组装二级菜单
  function asemblyPage(funcCode) {
    pm[funcCode] = {
      isInitChildMenu: true,//是否初始化子菜单
      thirdLevelCode: funcCode,//三级菜单编码
    }
  }

  //初始化组装三级菜单对象
  function asemblyChildMenu(parentCode, childCode) {
    pm[parentCode][childCode] = {
      isInitChildMenu: true,
      parentCode: parentCode,
      childCode: childCode,
      fourLevelCode: parentCode
    }
  }

  // 初始化四级菜单
  function asemblyFourMenu(parentCode, childCode, fourCode) {
    pm[parentCode][childCode][fourCode] = {
      pageNum: 1,
      pageSize: 10,
      isScroll: false,//初始化滚动状态
      lastDttm: pm.currDttm,
      scrollHeight: 0,
      parentCode: parentCode, // 二级菜单
      funcCode: childCode,  // 三级菜单
      fourCode: fourCode,    // 四级菜单
    }
  }

  function initMenus(menuCode) {
    // 查询应用菜单信息
    Server.tableList.getApplicationMenus({
      parentCode: pm.menuCode
    }).then(function (data) {
      pm.menus = data.list
      dealMenuInside()
    })

  }

  //初始化二级菜单
  function dealMenuInside() {
    let htmlStr = ''
    if (Utils.notEmpty(pm.menus) && pm.menus.length > 0) {
      $.each(pm.menus, function (i, it) {
        htmlStr += '       <div class="ff400 fs14 info-inside-item pos-r ' + (i === 0 ? ' active ' : '') + ' " onclick="changeColumn(this, \'' + it.menuCode + '\',\'' + it.viewMode + '\')">\n' +
          '                <div>' + it.menuName + '</div>\n' +
          '                <span class="flex-row justify-content-center info-inside-underline pos-a">\n' +
          '                    <span class=\'' + (i === 0 ? 'underactive' : '') + '\'></span>\n' +
          '                </span>\n' +
          '            </div>'


        //初始化组装翻页页数
        //if (i !== 0) {
        asemblyPage(it.menuCode)

        //   }
        //初始化列表容器
        $('#menuIds').append('<div class=\'menus\' id="menuId_' + it.menuCode + '"></div>')
        if (i === 0) { // 如果是第一次进入
          changeColumn(this, it.menuCode, it.viewMode)
        }
      })
    }

    $('.info-inside-column').html(htmlStr)

    //切换事件初始化
    $('.info-inside-warp .info-inside-column .info-inside-item').each(function (i, n) {
      $(n).click(function () {
        $('.info-inside-warp .info-inside-column .info-inside-item').removeClass('active')
        $(n).addClass('active')
        $('.info-inside-warp .info-inside-column .info-inside-item .info-inside-underline span').removeClass('underactive')
        $(n).find('span').addClass('underactive')
      })
    })
  }

  //初始化三级级菜单
  function dealChildInside(fcode, viewMode) {
    $.each(pm.menus, function (i, item) {
      if (fcode === item.menuCode) {
        //获取当前二级菜单,如果是首次点击则初始化，如果子菜单有值
        let htmlStr = ''
        let childStr = ''
        if (item.childMenus && item.childMenus.length > 0) {

          htmlStr = '<div class="flex-row  flex-wrap inside-child pt10 ' + (viewMode !== '0' ? 'menu-show' : '') + ' " id="insideId_' + fcode + '" >'
          //初始化组装三级菜单对象
          asemblyChildMenu(fcode, fcode)

          if (pm[fcode].isInitChildMenu) {
            pm[fcode].firstChildCode = fcode
          }

          $.each(item.childMenus, function (k, obj) {
            htmlStr += '<div class="flex-row ff400 fs13 menu-inside-item" id="mId_' + obj.menuCode + '" onclick=\'changeThirdMenu("' + fcode + '", "' + obj.menuCode + '")\'><span class="' + (k === 0 ? 'active' : '') + '">' + obj.menuName + '</span></div>'
            childStr += '<div class=\'menu-child\' id="childId_' + obj.menuCode + '"></div>'

            //初始化组装三级菜单对象
            asemblyChildMenu(fcode, obj.menuCode)
            if (k === 0) {
              pm[fcode].firstChildCode = obj.menuCode
              pm[fcode].thirdLevelCode = obj.menuCode
            }
          })
          htmlStr += '</div>'
          $('.menu-inside-column').append(htmlStr)
          $('#menuId_' + fcode).html(childStr)
          $.each(item.childMenus, function (k, obj) {
            dealFourInside(fcode, obj, obj.viewMode)
          })

        }
        //初始完成后，打上标志
        pm[fcode].isInitChildMenu = false
      }
    })
  }


  //初始化四级级菜单
  function dealFourInside(fcode, obj, viewMode) {
    if (obj.childMenus && obj.childMenus.length > 0) {
      $('.industry-view-model').append('<div class="industry-view-tab flex-row flex-wrap mb15 ' + (viewMode === '0' || viewMode === '1' ? 'menu-show' : '') + ' " id="industry-view_' + obj.menuCode + '"></div>')
      $.each(obj.childMenus, function (i, item) {
        if (obj.menuCode === item.parentCode) {
          //获取当前二级菜单,如果是首次点击则初始化，如果子菜单有值
          let htmlStr = ''
          let childStr = ''
          htmlStr += ' <div class=\'industry-view-normal  industry-view-normal_' + item.menuCode + '  ' + (i === 0 ? 'industry-view-active industry-view-left' : 'industry-view-right') + '\'  onclick=\'changeFourMenu("' + item.parentCode + '","' + item.menuCode + '")\'>' + item.menuName + '</div>'
          childStr += '<div class=\'menu-child-four\' id="childId_' + item.menuCode + '"></div>'

          asemblyFourMenu(fcode, item.parentCode, item.menuCode)
          if (i === 0) {
            pm[fcode][item.parentCode].fourLevelCode = item.menuCode
          }

          $('#industry-view_' + obj.menuCode).append(htmlStr)

          $('#childId_' + item.parentCode).append(childStr)

          //初始完成后，打上标志
          pm[fcode].isInitChildMenu = false
        }
      })
    }
  }


  function changeColumn(that, fCode, viewMode) {

    pm.secondLevelCode = fCode

    $('.contentArea').hide()

    $('#menuIds').show()
    $('.menus').hide()
    $('.inside-child').hide()
    $('#menuId_' + fCode).show()
    $('#childId_' + pm[fCode].thirdLevelCode).show()
    $('.inside-child').hide()
    $('#insideId_' + fCode).show()

    //菜单左、右移
    Template.btnLevelMove(that, window.screen.width, 'info-inside-column', 'active')

    //设置距离顶部但高度（状态栏+导航栏）
    $('#heightFromTop').css({
      height: '1.64rem'
    })

    //展示三级菜单选择器
    $('.menu-inside-warp').show()

    //展示三级菜单选择器
    if (pm[fCode].isInitChildMenu) {
      dealChildInside(fCode, viewMode)
    }
    // 控制四级菜单的显示和隐藏
    $('.industry-view-tab').hide()
    $('#industry-view_' + pm[fCode].thirdLevelCode).show()

    // 空判断
    if (pm[fCode].thirdLevelCode && pm[fCode][pm[fCode].thirdLevelCode] && pm[fCode][pm[fCode].thirdLevelCode].fourLevelCode) {
      if ($('#childId_' + pm[fCode][pm[fCode].thirdLevelCode].fourLevelCode).html() === '') {
        initInfoList(pm[fCode][pm[fCode].thirdLevelCode].fourLevelCode)
      }
    }
    changeThirdMenuStyle(pm[fCode].thirdLevelCode)
    menuHide()
  }


  function changeThirdMenu(parentCode, childCode) {
    $('.menu-child').hide()
    $('#childId_' + childCode).show()
    $('.industry-view-tab').hide()
    $('#industry-view_' + childCode).show()

    //pm.secondLevelCode = parentCode

    pm[parentCode].thirdLevelCode = childCode

    changeThirdMenuStyle(childCode)

    //切换后初始化
    pm[parentCode][childCode].lastDttm = DateUtils.getNowInt()
    $('html,body').animate({scrollTop: pm[parentCode][childCode].scrollHeight}, 100)//动画效果

    if ($('#childId_' + pm[parentCode][childCode].fourLevelCode).html() === '') {
      initInfoList(pm[parentCode][childCode].fourLevelCode)
    }
    menuHide()

  }

  function changeThirdMenuStyle(fCode) {
    $('.menu-inside-item span').removeClass('active')
    $('#mId_' + fCode).find('span').addClass('active')
  }

  function changeFourMenu(parentCode, childCode) {
    //changeFourMenuStyle(parentCode, childCode)
    $('.menu-child').hide()
    $('#childId_' + parentCode).show()
    $('#childId_' + parentCode).find('.menu-child-four').hide()
    $('#childId_' + childCode).show()

    //
    //pm.secondLevelCode = parentCode
    //
    //pm[pm.secondLevelCode].thirdLevelCode = parentCode
    pm[pm.secondLevelCode][parentCode].fourLevelCode = childCode
    //
    changeFourMenuStyle(parentCode, childCode)
    //
    ////切换后初始化
    //pm[parentCode][childCode].lastDttm = DateUtils.getNowInt()
    //$('html,body').animate({ scrollTop: pm[parentCode][childCode].scrollHeight }, 100)//动画效果
    //
    if ($('#childId_' + childCode).html() === '') {
      initInfoList(childCode)
    }
    menuHide()
  }

  function changeFourMenuStyle(parentCode, childCode) {
    $('#industry-view_' + parentCode).find('.industry-view-normal').removeClass('industry-view-active')
    $('.industry-view-normal_' + childCode).addClass('industry-view-active')
  }

  function menuHide() {
    $('.menu-show').hide()
  }

  //分享
  function dealShare() {
    let item = {
      title: 'title',
      content: 'content',
      url: dict.SHARE_HOST + 'app/common/index.html#/index?id=' + 1 + '&type=' + 1 + '&version=' + dict.version,
      image: 'image',
      type: 'url'
    }
    Template.shareWindow(item)
    stopBubbling()
  }


</script>
</html>
